<template>
    <div id="app">
        <Topbar :key="topbarKey" />
        <Header />
        <router-view @updataKey="updataKeyFn" />
        <Footer />
        <Login v-show="isShowLoginModal" />
        <!-- 是否显示提示框 -->
        <transition name="slide">
            <Toast v-show="isShowToast" />
        </transition>
    </div>
</template>
<script>
import Topbar from "@/components/Topbar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";

// import request from "@/request/request";

import { JingpinApi } from "@/request/api";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
    data() {
        return {
            topbarKey: 1,
        };
    },
    components: {
        Topbar,
        Header,
        Footer,
        Login,
        Toast,
    },
    computed: {
        ...mapState({
            isShowLoginModal: (state) => state.hdIsShowModal.isShowLoginModal,
            isShowToast: (state) => state.showToast.isShowToast,
        }),
    },
    async created() {
        /* 
            可优化点
            1. 请求时,每一次都要手动填入域名 http://192.168.113.249:8081/cms/
                /products/recommend 如果接口地址发生变化,有几个调用就需要改几个组件

            2.

        
        */
        /*      this.$axios
                .get("http://192.168.113.249:8081/cms/products/recommend")
                .then((res) => {
                    console.log(res.data);
                }); 
        */
        /*  request.get("/products/recommend").then((res) => {
            console.log(res);
        });
         */
        /*  JingpinApi().then((res) => {
            console.log(res);
        }) 
        */
        // ! [测试] 访问环境变量   process.env.变量名
        // ! npm run serve 输出开发环境变量值  .env.dev
        // ! npm run servepro 输出生产环境变量值 .env.prod
        console.log(
            "输出的环境变量值",
            process.env.VUE_APP_BASE_URL,
            process.env.VUE_APP_HUXIAO
        );
    },
    methods: {
        updataKeyFn() {
            this.topbarKey++;
        },
    },
    watch: {
        "$route.path": {
            handler(newVal, oldVal) {
                // console.log("app-watch");
                this.topbarKey++;
            },
        },
    },
};
</script>

<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
    opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
    transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
    opacity: 1;
}
</style>
